<template>
  <div style="padding-bottom:40px;padding-top:20px" v-if="zfNameflag">
    <div style="padding:0px 20px;">
      <parklist :getParkDetail="parkChange" :getParkNameMap="getParkName"></parklist>
    </div>
    <div class="subject">
      <div class="tab" style="margin-top: 0px;">
        <div class="Unit">
          <div class="Unit-title">基本信息</div>
          <div class="warnControll_charts">
            <el-table :data="parkInfo"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                ref="table1"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px" header-align="center" align="center"></el-table-column>
              <el-table-column prop="name" :show-overflow-tooltip="true" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.name)" placement="top-start">
                    <span>{{scope.row.name}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="location" :show-overflow-tooltip="true" label="市区县"></el-table-column>
              <el-table-column prop="parkDetails" label="园区介绍">
                <template scope="scope">
                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492FF" @click="showDetail(scope.row)">{{scope.row.parkDetails}}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
                :title="tittleName"
                :visible.sync="dialogVisible"
                width="42%"
                center>
                <el-row>
                  <el-col :span="4" style="color: #666666;font-size: 16px">园区：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.name}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">负责人：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.manager}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">园区市县区：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.location}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">园区简介：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.parkDetails}}</el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">关闭</el-button>
                </span>
            </el-dialog>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">企业数量</div>
          <div style="padding:10px">
            <el-date-picker
              v-model="year2"
              type="year"
              :picker-options="pickerOptions1"
              :clearable="false"
              :editable="false"
              @change="getDataByYear('entCount')"
              placeholder="选择年">
            </el-date-picker>  
          </div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="enterpriseCount"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="310px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px" header-align="center" align="center"></el-table-column>
              <el-table-column prop="parkName" :show-overflow-tooltip="true" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                    <span>{{scope.row.parkName}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :show-overflow-tooltip="true" label="企业数量占比" header-align="center" align="center"></el-table-column>
              <el-table-column prop="count" header-align="center" align="center" :show-overflow-tooltip="true" label="企业数量">
                <template scope="scope">
                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492FF" @click="showDetail3(scope.row)">{{scope.row.count}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-dialog
            :title="tittleName3"
            :visible.sync="dialogVisible3"
            width="42%"
            center>
            <el-table :data="enterpriseCountDetail"
              class="customer-table"
              :row-style="{height:'32px'}"
              :cell-style="{padding:'0px'}"
              style="width: 100%"
              height="370px"
              :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column prop="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
              <el-table-column prop="timeLimit" :show-overflow-tooltip="true" label="时间" header-align="center" align="center"></el-table-column>
            </el-table>
            <el-pagination
              style="margin-top:20px;text-align: center"
              background
              layout="prev, pager, next"
              :total="pagination3.total"
              :page-size="pagination3.pageSize"
              @current-change="handleCurrentChange3">
            </el-pagination>
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="subject">
      <div class="tab">
        <div class="Unit">
          <div class="Unit-title">工业总产值</div>
          <div style="padding:10px">
            <el-date-picker
              v-model="year1"
              type="year"
              :picker-options="pickerOptions1"
              :clearable="false"
              :editable="false"
              @change="getDataByYear('industryTotal')"
              placeholder="选择年">
            </el-date-picker>  
          </div>
          <div class="warnControll_charts">
            <el-table :data="industryTotalOutput"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="310px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px" header-align="center" align="center"></el-table-column>
              <el-table-column prop="name" :show-overflow-tooltip="true" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.name)" placement="top-start">
                    <span>{{scope.row.name}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :show-overflow-tooltip="true" label="总产值占比" header-align="center" align="center"></el-table-column>
              <el-table-column prop="outputValue" header-align="center" align="center" :show-overflow-tooltip="true" label="总产值"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="Unit">
          <!-- <div class="Unit-title">伤亡人数</div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="casualtiesCount"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px" header-align="center" align="center"></el-table-column>
              <el-table-column prop="name" :show-overflow-tooltip="true" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.name)" placement="top-start">
                    <span>{{scope.row.name}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :show-overflow-tooltip="true" label="人数占比" header-align="center" align="center"></el-table-column>
              <el-table-column prop="count" header-align="center" align="center" :show-overflow-tooltip="true" label="人数"></el-table-column>
            </el-table>
          </div> -->
          <div class="Unit-title">全员劳动生产率</div>
          <div style="padding:10px">
            <el-date-picker
              v-model="year4"
              type="year"
              :picker-options="pickerOptions1"
              :clearable="false"
              :editable="false"
              @change="getDataByYear('entAver')"
              placeholder="选择年">
            </el-date-picker>  
          </div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="enterpriseAverOutput"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="310px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px" header-align="center" align="center"></el-table-column>
              <el-table-column prop="parkName" :show-overflow-tooltip="true" label="园区名称"></el-table-column>
              <el-table-column prop="parkPersonCount" :show-overflow-tooltip="true" label="人员数量" header-align="center" align="center"></el-table-column>
              <el-table-column prop="AverageOutput" header-align="center" align="center" :show-overflow-tooltip="true" label="劳动生产率"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="subject">
      <div class="tab">
        <div class="Unit">
          <div class="Unit-title">园区人员和车辆</div>
          <!-- <div style="padding:10px">
            <el-date-picker
              v-model="month1"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              @change="getDataByMonth('carAndPerson')"
              placeholder="选择月">
            </el-date-picker>  
          </div> -->
          <div style="margin-left: 20px;font-size: 14px;line-height: 19px;margin-bottom:30px;margin-top:10px;color: #999999">时间截止至: {{nowTime}}</div>
          <div style="margin-left: 1.4%;margin-right: 1.4%;display:flex">
            <div style="margin-left: 50px">
              <img src="@/assets/img/safetyCar.png" width="120px" height="112px"/>
            </div>
            <div style="margin-left: 25%">
              <div style="margin-top: 30px;text-align: center;">
                <span class="count_sty" style="font-size: 38px;font-weight: 500;color: #1492FF;">{{carSum}}</span>
              </div>
              <div style="margin-top: 5px;text-align: center;">
                <span class="unit_sty" style="font-size: 16px;font-weight: 500;color: #979797;">总数/辆</span>
              </div>
            </div>
            <el-dialog
              :title="tittleName4"
              :visible.sync="dialogVisible4"
              width="50%"
              center>
              <el-table :data="parkGroupCarCountDetail"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="gateName" :show-overflow-tooltip="true" label="门岗名称" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="gateKeeper" :show-overflow-tooltip="true" label="保安人员" header-align="center" align="center"></el-table-column>
                <el-table-column prop="subjectCategory" :show-overflow-tooltip="true" label="人员类型" header-align="center" align="center"></el-table-column>
                <el-table-column prop="eventType" :show-overflow-tooltip="true" label="进出类型" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="进出时间" width='200px' header-align="center" align="center"></el-table-column>
              </el-table>
              <el-pagination
                style="margin-top:20px;text-align: center"
                background
                layout="prev, pager, next"
                :total="pagination4.total"
                :page-size="pagination4.pageSize"
                @current-change="handleCurrentChange4">
              </el-pagination>
            </el-dialog>
          </div>
          <div style="margin-left: 1.4%;margin-right: 1.4%;display:flex">
            <div style="margin-left: 50px;margin-top: 50px;">
              <img src="@/assets/img/safetyPeople.png" width="120px" height="112px"/>
            </div>
            <div style="margin-left: 25%">
              <div style="margin-top: 80px;text-align: center;">
                <span class="count_sty" style="font-size: 38px;font-weight: 500;color: #1492FF;">{{personSum}}</span>
              </div>
              <div style="margin-top: 5px;text-align: center;">
                <span class="unit_sty" style="font-size: 16px;font-weight: 500;color: #979797;">总数/人</span>
              </div>
            </div>
            <el-dialog
              :title="tittleName5"
              :visible.sync="dialogVisible5"
              width="50%"
              center>
              <el-table :data="parkGroupPersonCountDetail"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="gateName" :show-overflow-tooltip="true" label="门岗名称" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="gateKeeper" :show-overflow-tooltip="true" label="保安人员" header-align="center" align="center"></el-table-column>
                <el-table-column prop="subjectCategory" :show-overflow-tooltip="true" label="车辆类型" header-align="center" align="center"></el-table-column>
                <el-table-column prop="eventType" :show-overflow-tooltip="true" label="进出类型" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="进出时间" width='200px' header-align="center" align="center"></el-table-column>
              </el-table>
              <el-pagination
                style="margin-top:20px;text-align: center"
                background
                layout="prev, pager, next"
                :total="pagination5.total"
                :page-size="pagination5.pageSize"
                @current-change="handleCurrentChange5">
              </el-pagination>
            </el-dialog>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">园区环境报警详情</div>
          <div style="padding:10px">
            <el-date-picker
              v-model="year3"
              type="year"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              @change="getDataByYear('warning')"
              placeholder="选择年">
            </el-date-picker>  
          </div>
          <div class="warnControll_charts">
            <div id="annular1" ref="annular1" style="width:100%;height:320px"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="subject">
      <div class="tab">
        <div class="Unit">
          <div class="Unit-title">危化品储量排名</div>
          <div style="margin-bottom:10px">
            <el-date-picker
              v-model="month3"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              @change="getDataByMonth('parkDanger')"
              placeholder="选择月">
            </el-date-picker>  
          </div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="parkDanger"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="310px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.nameAbbreviation)" placement="top-start">
                    <span>{{scope.row.nameAbbreviation}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :show-overflow-tooltip="true" label="危化品储量占比" header-align="center" align="center"></el-table-column>
              <el-table-column prop="count" align="center" :show-overflow-tooltip="true" label="危化品储量数">
                <template scope="scope">
                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492FF" @click="showDetail2(scope.row)">{{scope.row.count}}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
              :title="tittleName2"
              :visible.sync="dialogVisible2"
              width="42%"
              center>
              <el-table :data="parkDangerDetail"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column prop="dangerName" :show-overflow-tooltip="true" label="危化品名称" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="dangerBatch" :show-overflow-tooltip="true" label="危化品批次" header-align="center" align="center"></el-table-column>
                <el-table-column prop="maxStock" :show-overflow-tooltip="true" label="最大存储量" header-align="center" align="center"></el-table-column>
                <el-table-column prop="createTime" :show-overflow-tooltip="true" label="统计时间" width='200px' header-align="center" align="center"></el-table-column>
              </el-table>
              <el-pagination
                style="margin-top:20px;text-align: center"
                background
                layout="prev, pager, next"
                :total="pagination2.total"
                :page-size="pagination2.pageSize"
                @current-change="handleCurrentChange2">
              </el-pagination>
            </el-dialog>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">应急物资排名</div>
          <div style="padding:10px">
            <el-date-picker
              v-model="month2"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              @change="getDataByMonth('parkEmergencyMaterial')"
              placeholder="选择月">
            </el-date-picker>  
          </div>
          <div class="warnControll_charts">
            <el-table :data="parkEmergencyMaterial"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="310px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.nameAbbreviation)" placement="top-start">
                    <span>{{scope.row.nameAbbreviation}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :show-overflow-tooltip="true" label="应急物资数占比" header-align="center" align="center"></el-table-column>
              <el-table-column prop="materialCount" align="center" label="应急物资数">
                <template scope="scope">
                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492FF" @click="showDetail1(scope.row)">{{scope.row.materialCount}}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
              :title="tittleName1"
              :visible.sync="dialogVisible1"
              width="42%"
              center>
              <el-table :data="parkEmergencyMaterialDetail"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column prop="materialName" :show-overflow-tooltip="true" label="物资名称" width='90px' header-align="center" align="center"></el-table-column>
                <el-table-column prop="materialCount" :show-overflow-tooltip="true" label="物资数量" header-align="center" align="center"></el-table-column>
                <el-table-column prop="createTime" :show-overflow-tooltip="true" label="统计时间" width='200px' header-align="center" align="center"></el-table-column>
              </el-table>
              <el-pagination
                style="margin-top:20px;text-align: center"
                background
                layout="prev, pager, next"
                :total="pagination1.total"
                :page-size="pagination1.pageSize"
                @current-change="handleCurrentChange1">
              </el-pagination>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi';
import * as echarts from 'echarts'
export default {
  components: { parklist },
  data () {
    return {
      parkNameMap: new Map(),

      now: '',
      nowTime: '', // 当前时间

      dialogVisible: false, // 园区基本信息
      dialogVisible1: false, // 应急物资排名
      dialogVisible2: false, // 危化品储量排名排名
      dialogVisible3: false, // 企业数量
      dialogVisible4: false, // 车辆排名
      dialogVisible5: false, // 人员排名
      tittleName: '园区信息详情', //  园区基本信息弹窗名
      tittleName1: '应急物资排名详情', // 应急物资排名弹窗名
      tittleName2: '危化品储量排名详情', // 危化品储量排名弹窗名
      tittleName3: '企业数量详情', // 企业数量弹窗名
      tittleName4: '车辆排名详情', // 车辆排名弹窗名
      tittleName5: '人员排名详情', // 人员排名弹窗名

      parkInfoDetail: {},
      carSum: '', // 车辆总数
      personSum: '', // 人员总数

      pagination1: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pagination2: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pagination3: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pagination4: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pagination5: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      
      month1: '',
      month2: '',
      month3: '',
      selecedMonth1: '',
      selecedMonth2: '',
      selecedMonth3: '',
      selecedMonth4: '',
      selecedMonth5: '',

      year1: '',
      year2: '',
      year3: '',
      year4: '',
      selecedYear1: '',
      selecedYear2: '',
      selecedYear3: '',
      selecedYear4: '',
      zfNameflag: true,
      myChart1: {},
      option1: {},

      parkInfo: [], // 园区基本信息
      industryTotalOutput: [], // 工业总产值
      enterpriseCount: [], // 企业数量
      enterpriseAverOutput: [], // 企业均产值
      // parkGroupCarCount: [], // 园区车辆排名
      // parkGroupPersonCount: [], // 园区人员排名
      parkEmergencyMaterial: [], // 应急物资排名
      parkDanger: [], // 危化品储量排名
      casualtiesCount: [], // 伤亡人数

      parkEmergencyMaterialDetail: [], // 应急物资排名详情
      parkDangerDetail: [], // 危化品储量排名详情
      parkGroupCarCountDetail: [], // 园区车辆排名详情
      parkGroupPersonCountDetail: [], // 园区人员排名详情
      enterpriseCountDetail: [], // 企业数量详情
      // 当月以前
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        }
      },
      // 企业均产值前一年
      pickerOptions1: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, 0)
        }
      },
      // 当天以前
      expireTimeOption: {
        disabledDate (date) {
          return date.getTime() > Date.now();
        }
      },
    }
  },
  // created () {
  //   if (dd !== undefined) {
  //     dd.getAuthCode({}).then(res =>{
  //       if (res) {
  //         let params = {
  //           applicationFlag: '20',
  //           authCode: res.auth_code
  //         }
  //         this.$http.post(`/home/sys/loginfree/authentication`, params)
  //           .then(({ data: res }) => {
  //             console.log('res2:',res);
  //             this.$store.commit('zfName', res.data.lastName)
  //             if (res.code !== 0) {
  //               this.zfNameflag = false
  //             }
  //           }).catch(() => {
  //             this.zfNameflag = false
  //           })
  //       }
  //     }).catch(() => {
  //       this.zfNameflag = false
  //     })
  //   } else {
  //     this.$message.error('请在浙政钉环境下浏览该页面！');
  //   }
  // },
  mounted () {
    this.renderMyChart1()
    this.getDate()  // 获取时间 年月
    this.now = new Date()
    this.nowTime = this.selecedYear3 + '-' + this.formatDate(this.now, 'MM-dd hh:mm:ss')
    this.getData()  // 初始化数据
    this.getWarning()
    this.getindustryTotal()
    this.getEntCount()
    // this.getright_table()
  },
  methods: {
    sortByKey(array,key){
      return array.sort(function(a,b){
        var x=a[key];
        var y=b[key];
        return ((x>y)?-1:((x>y)?1:0));
      })
    },
    getParkName (map) {
      this.parkNameMap = map
    },
    getNameByAbbreviation (key) {
      return this.parkNameMap.get(key)
    },
    // getright_table(){
    //   var isScroll = true
    //   // 拿到表格挂载后的真实DOM
    //   const table = this.$refs.table1
    //   // 拿到表格中承载数据的div元素
    //   const divData = table.bodyWrapper
    //   this.addEvent(divData, "mouseenter", function() {
    //     isScroll = false
    //   })
    //   this.addEvent(divData, "mouseleave", function() {
    //     isScroll = true
    //   })
    //   setInterval(() => {
    //     if (isScroll) {
    //       // 元素自增距离顶部1像素
    //       divData.scrollTop += 1
    //       // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    //       if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
    //         // 重置table距离顶部距离
    //         divData.scrollTop = 0
    //       }
    //     }
    //   }, 100)
    // },
    // addEvent(obj,sEvent,fn){
    //   if(obj.attachEvent){
    //     obj.attachEvent("on"+sEvent,fn)
    //   }else{
    //     obj.addEventListener(sEvent,fn,false)
    //   }
    // },
    // 切换园区
    parkChange (data) {
      sessionStorage.setItem('routeName1',data.coordinateList[0].name)
      this.$router.push({
        name: 'zfParkManagementDetail',
        query: {
          data: data
        }
      })
    },
    getDate () {
      this.month1 = new Date()
      this.month2 = new Date()
      this.month3 = new Date()
      let temp = ''
      temp = this.month1.getMonth() + 1
      if (temp < 10) {
        temp = '0' + temp.toString()
      }
      temp = this.month1.getFullYear().toString() + temp
      this.selecedMonth1 = temp
      temp = this.month2.getMonth() + 1
      if (temp < 10) {
        temp = '0' + temp.toString()
      }
      temp = this.month2.getFullYear().toString() + temp
      this.selecedMonth2 = temp
      temp = this.month3.getMonth() + 1
      if (temp < 10) {
        temp = '0' + temp.toString()
      }
      temp = this.month3.getFullYear().toString() + temp
      this.selecedMonth3 = temp
      this.selecedMonth4 = temp
      this.selecedMonth5 = temp

      this.year1 = new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, 0)
      this.year2 = new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, 0)
      this.year3 = new Date()
      this.year4 = new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, 0)

      this.selecedYear1 = this.year1.getFullYear()
      this.selecedYear2 = this.year2.getFullYear()
      this.selecedYear3 = this.year3.getFullYear()
      this.selecedYear4 = this.year4.getFullYear()
    },
    getData () {
      this.$http.post(`/home/chemical/parkInfo/getParkManagementPark`,{
        months:this.selecedMonth1,
        years:this.selecedYear1.toString()
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          // 车辆、人员总数
          this.carSum = res.data.carSum
          if (this.carSum < 0) {
            this.carSum = 0
          }
          this.personSum = res.data.personSum
          if (this.personSum < 0) {
            this.personSum = 0
          }
          
          // 园区基本信息
          res.data.effectiveParkList.forEach(item => {
            this.parkInfo.push(
              {
                name:item.name,
                location:item.cityName + item.districtName,
                parkDetails:item.parkDetails,
                manager:item.manager
              }
            )
          })

          // let total1 = res.data.parkInfoOutputList.reduce(
          //   (acc, current) => acc + parseFloat(current.outputValue), 0
          // ) 
          // let temp1 = ''

          // // 工业总产值
          // res.data.parkInfoOutputList.forEach(item => {
          //   temp1 = ''
          //   // 百分比是0.00% 显示 -
          //   if (total1 === 0) {
          //     temp1 = '—'
          //   }else{
          //     temp1 = ((item.outputValue / total1) * 100).toFixed(2) + '%' 
          //     if (temp1 === '0.00%') {
          //       temp1 = '—'
          //     }
          //   }
          //   if (!item.outputValue || parseInt(item.outputValue) === 0) {
          //     item.outputValue = '—'
          //   }
          //   this.industryTotalOutput.push(
          //     {
          //       name:item.name,
          //       outputValue:item.outputValue,
          //       proportion: temp1
          //     }
          //   )
          // })
          // let total2 = res.data.parkEnterpriseList.reduce(
          //   (acc, current) => acc + current.count, 0
          // )
          // let temp2 = ''
          // // 企业数量
          // res.data.parkEnterpriseList.forEach(item => {
          //   // 百分比是0.00% 显示 -
          //   if (total2 === 0) {
          //     temp2 = '—'
          //   }else{
          //     temp2 = ((item.count / total2) * 100).toFixed(2) + '%' 
          //     if (temp2 === '0.00%' || temp2 === 'NaN%') {
          //       temp2 = '—'
          //     }
          //   }
          //   // 数量是0 显示-
          //   if (!item.count || parseInt(item.count) === 0) {
          //     item.count = '—'
          //   }
          //   this.enterpriseCount.push(
          //     {
          //       parkName:item.parkName,
          //       count:item.count,
          //       proportion: temp2,
          //       parkCode: item.parkCode
          //     }
          //   )
          // })

          let legend = []
          let series = []
          // 告警表排名
          res.data.alarmDataDiscountChart.forEach(item => {
            legend.push(item.parkName)
            series.push({
              name: item.parkName,
              type: 'line',
              data: item.data
            })
          })
          this.option1.legend.data = legend.slice(0,10)
          this.option1.series = series.slice(0,10)
          this.myChart1.setOption(this.option1)

          // let total3 = res.data.averageOutput.reduce(
          //   (acc, current) => acc + current.AverageOutput, 0
          // )
          // let temp3 = ''
          // // 企业的均产值
          // res.data.averageOutput.forEach(item => {
          //   // 百分比是0.00% 显示 -
          //   if (total3 === 0) {
          //     temp3 = '—'
          //   }else{
          //     temp3 = ((item.AverageOutput / total3) * 100).toFixed(2) + '%' 
          //     if (temp3 === '0.00%' || temp3 === 'NaN%') {
          //       temp3 = '—'
          //     }
          //   }
          //   if (!item.AverageOutput || parseInt(item.AverageOutput) === 0) {
          //     item.AverageOutput = '—'
          //   }
          //   this.enterpriseAverOutput.push(
          //     {
          //       parkName:item.parkName,
          //       AverageOutput:item.AverageOutput,
          //       proportion: temp3
          //     }
          //   )
          // })

          let total4 = res.data.parkEmergencyMaterialVos.reduce(
            (acc, current) => acc + current.materialCount, 0
          )
          let temp4 = ''
          // 应急物资排名
          res.data.parkEmergencyMaterialVos.forEach(item => {
            // 百分比是0.00% 显示 -
            if (total4 === 0) {
              temp4 = '—'
            }else{
              temp4 = ((item.materialCount / total4) * 100).toFixed(2) + '%' 
              if (temp4 === '0.00%' || temp4 === 'NaN%') {
                temp4 = '—'
              }
            }
            if (!item.materialCount || parseInt(item.materialCount) === 0) {
              item.materialCount = '—'
            }
            this.parkEmergencyMaterial.push(
              {
                nameAbbreviation:item.nameAbbreviation,
                materialCount:item.materialCount,
                proportion: temp4,
                parkCode: item.parkCode
              }
            )
          })

          let total5 = res.data.parkDangerVos.reduce(
            (acc, current) => acc + current.count, 0
          )
          let temp5 = ''
          // 危化品储量排名
          res.data.parkDangerVos.forEach(item => {
            // 百分比是0.00% 显示 -
            if (total5 === 0) {
              temp5 = '—'
            }else{
              temp5 = ((item.count / total5) * 100).toFixed(2) + '%' 
              if (temp5 === '0.00%' || temp5 === 'NaN%') {
                temp5 = '—'
              }
            }
            if (!item.count || parseInt(item.count) === 0) {
              item.count = '—'
            }
            this.parkDanger.push(
              {
                nameAbbreviation:item.nameAbbreviation,
                count:item.count,
                proportion: temp5,
                parkCode: item.parkCode
              }
            )
          })

          let total6 = res.data.effectiveParkList.reduce(
            (acc, current) => acc + current.count, 0
          )
          let temp6 = ''
          // 伤亡人数
          res.data.effectiveParkList.forEach(item => {
            // 百分比是0.00% 显示 -
            if (total6 === 0) {
              temp6 = '—'
            }else{
              temp6 = ((item.count / total6) * 100).toFixed(2) + '%' 
              if (temp6 === '0.00%' || temp6 === 'NaN%') {
                temp6 = '—'
              }
            }
            if (!item.count || parseInt(item.count) === 0) {
              item.count = '—'
            }
            this.casualtiesCount.push(
              {
                name:item.name,
                count:item.count,
                proportion: temp6
              }
            )
          })
        }
      })
    },
    getEntCount () { // 企业数量
      this.selecedYear2 = this.year2.getFullYear().toString()
      this.$http.post(`/home/chemical/parkInfo/getParkEnterpriseByCountYear`,{
        years: this.selecedYear2
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.enterpriseCount = []
          let total2 = res.data.parkEnterpriseList.reduce(
            (acc, current) => acc + current.count, 0
          )
          let temp2 = ''
          // 企业数量
          res.data.parkEnterpriseList.forEach(item => {
            // 百分比是0.00% 显示 -
            if (total2 === 0) {
              temp2 = '—'
            }else{
              temp2 = ((item.count / total2) * 100).toFixed(2) + '%' 
              if (temp2 === '0.00%' || temp2 === 'NaN%') {
                temp2 = '—'
              }
            }
            // 数量是0 显示-
            if (!item.count || parseInt(item.count) === 0) {
              item.count = '—'
            }
            this.enterpriseCount.push(
              {
                parkName:item.parkName,
                count:item.count,
                proportion: temp2,
                parkCode: item.parkCode
              }
            )
          })
        }
      })
    },
    getindustryTotal () { // 工业总产值
      this.selecedYear1 = this.year1.getFullYear().toString()
      this.$http.post(`/home/chemical/parkInfo/getParkInfoOutputByYears`,{
        years: this.selecedYear1
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.industryTotalOutput = []

          let total1 = res.data.parkInfoOutputList.reduce(
            (acc, current) => acc + parseFloat(current.outputValue), 0
          ) 
          let temp1 = ''

          // 工业总产值
          res.data.parkInfoOutputList.forEach(item => {
            temp1 = ''
            // 百分比是0.00% 显示 -
            if (total1 === 0) {
              temp1 = '—'
            }else{
              temp1 = ((item.outputValue / total1) * 100).toFixed(2) + '%' 
              if (temp1 === '0.00%') {
                temp1 = '—'
              }
            }
            if (!item.outputValue || parseInt(item.outputValue) === 0) {
              item.outputValue = '—'
            }
            this.industryTotalOutput.push(
              {
                name:item.name,
                outputValue:Number(item.outputValue),
                proportion: temp1
              }
            )
          })
          this.sortByKey(this.industryTotalOutput,'outputValue')
        }
      })
    },
    getWarning () { // 全员劳动生产率
      this.selecedYear4 = this.year4.getFullYear().toString()
      this.$http.post(`/home/chemical/parkInfo/getAverageOutputByYear`,{
        years: this.selecedYear4
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.enterpriseAverOutput = []
          res.data.forEach(item => {
            this.enterpriseAverOutput.push(
              {
                parkPersonCount:item.parkPersonCount,
                parkName:item.parkName,
                AverageOutput:item.AverageOutput,
              }
            )
          })
          this.enterpriseAverOutput.forEach(item => {
            if (!item.AverageOutput || parseInt(item.AverageOutput) === 0) {
              item.AverageOutput = '—'
            }
            if (!item.parkPersonCount || parseInt(item.parkPersonCount) === 0) {
              item.parkPersonCount = '—'
            }
          })
        }
      })
    },
    // 告警表排名echarts初始化
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      this.option1 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: []
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '20%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
      this.myChart1.setOption(this.option1)
    },
    getDataByMonth(val){
      if (val === 'carAndPerson') {  // 车辆 人员排名
        // 月
        let temp = ''
        temp = this.month1.getMonth() + 1
        if (temp < 10) {
          temp = '0' + temp.toString()
        }
        // // 天
        // let temp2 = ''
        // temp2 = this.month1.getDate()
        // if (temp2 < 10) {
        //   temp2 = '0' + temp2.toString()
        // }
        temp = this.month1.getFullYear().toString() + temp
        this.selecedMonth1 = temp
        this.$http.post(`/home/chemical/parkInfo/getCarCountByDate`,{
          yearMonth: this.selecedMonth1
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            // 车辆总数
            this.carSum = res.data.carSum
            if (this.carSum < 0) {
              this.carSum = 0
            }
          }
        })
        this.$http.post(`/home/chemical/parkInfo/getPersonCountByDate`,{
          yearMonth: this.selecedMonth1
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            // 人员总数
            this.personSum = res.data.personSum
            if (this.personSum < 0) {
              this.personSum = 0
            }
          }
        })
      }else if (val === 'parkEmergencyMaterial') { // 应急物资排名
        let temp = ''
        temp = this.month2.getMonth() + 1
        if (temp < 10) {
          temp = '0' + temp.toString()
        }
        temp = this.month2.getFullYear().toString() + temp
        this.selecedMonth2 = temp
        this.$http.post(`/home/chemical/parkInfo/selectEmergencyMaterialSumByPark`,{
          months: this.selecedMonth2
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.parkEmergencyMaterial = []
            let total4 = res.data.reduce(
              (acc, current) => acc + current.materialCount, 0
            )
            let temp4 = ''
            // 应急物资排名
            res.data.forEach(item => {
              // 百分比是0.00% 显示 -
              if (total4 === 0) {
                temp4 = '—'
              }else{
                temp4 = ((item.materialCount / total4) * 100).toFixed(2) + '%' 
                if (temp4 === '0.00%' || temp4 === 'NaN%') {
                  temp4 = '—'
                }
              }
              if (!item.materialCount || parseInt(item.materialCount) === 0) {
                item.materialCount = '—'
              }
              this.parkEmergencyMaterial.push(
                {
                  nameAbbreviation:item.nameAbbreviation,
                  materialCount:item.materialCount,
                  proportion: temp4,
                  parkCode: item.parkCode
                }
              )
            })
          }
        })
      }else if (val === 'parkDanger') { // 危化品储量排名
        let temp = ''
        temp = this.month3.getMonth() + 1
        if (temp < 10) {
          temp = '0' + temp.toString()
        }
        temp = this.month3.getFullYear().toString() + temp
        this.selecedMonth3 = temp
        this.$http.post(`/home/chemical/parkInfo/selectDangerSumByPark`,{
          months: this.selecedMonth3
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.parkDanger = []
            let total5 = res.data.reduce(
              (acc, current) => acc + current.count, 0
            )
            let temp5 = ''
            // 危化品储量排名
            res.data.forEach(item => {
              // 百分比是0.00% 显示 -
              if (total5 === 0) {
                temp5 = '—'
              }else{
                temp5 = ((item.count / total5) * 100).toFixed(2) + '%' 
                if (temp5 === '0.00%' || temp5 === 'NaN%') {
                  temp5 = '—'
                }
              }
              if (!item.count || parseInt(item.count) === 0) {
                item.count = '—'
              }
              this.parkDanger.push(
                {
                  nameAbbreviation:item.nameAbbreviation,
                  count:item.count,
                  proportion: temp5,
                  parkCode: item.parkCode
                }
              )
            })
          }
        })
      }
    },
    getDataByYear(val){
      if (val === 'industryTotal') {  // 工业总产值
        this.getindustryTotal()
      } else if (val === 'entCount') { // 企业数量
        this.getEntCount()
      } else if (val === 'warning') {  // 告警表排名
        this.selecedYear3 = this.year3.getFullYear().toString()
        this.$http.post(`/home/chemical/parkInfo/getAlarmDataDiscountChartByYear`,{
          years: this.selecedYear3
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            let legend = []
            let series = []
            // 告警表排名
            res.data.forEach(item => {
              legend.push(item.parkName)
              series.push({
                name: item.parkName,
                type: 'line',
                data: item.data
              })
            })
            this.option1.legend.data = legend.slice(0,10)
            this.option1.series = series.slice(0,10)
            this.myChart1.setOption(this.option1)
          }
        })  
      } else { // 企业均产值
        this.getWarning()
      }
    },
    indexMethod (index) {
      return index + 1
    },
    showDetail (name) {
      this.parkInfoDetail = { ...name }
      this.tittleName = this.parkInfoDetail.name + '园区信息详情'
      this.dialogVisible = true
    },
    showDetail1 (name) { // 应急物资排名
      this.parkInfoDetail = { ...name }
      this.tittleName1 = this.parkInfoDetail.nameAbbreviation + '应急物资排名详情'
      this.parkEmergencyMaterialDetail = []
      this.dialogVisible1 = true
      this.pagination1.currentPage = 1
      this.pagination1.total = 0
      this.handleCurrentChange1()
    },
    // 翻页
    handleCurrentChange1 (val) {
      if (val && val !== null) {
        this.pagination1.currentPage = val
      }
      this.$http.post(`/home/chemical/parkInfo/selectEmergencyMaterialDetailByPark`,{
          months: this.selecedMonth2,
          parkCode:this.parkInfoDetail.parkCode,
          limit:10,
          page:this.pagination1.currentPage
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.pagination1.total = Number(res.data.count)
            let arr = []
            res.data.data.forEach(item => {
              arr.push({
                materialName:item.materialName,
                materialCount:item.materialCount,
                createTime:item.createTime
              })
            })
            this.parkEmergencyMaterialDetail = arr
          }
        })
    },
    showDetail2 (name) { // 危化品储量排名
      this.parkInfoDetail = { ...name }
      this.tittleName2 = this.parkInfoDetail.nameAbbreviation + '危化品储量排名详情'
      this.parkDangerDetail = []
      this.dialogVisible2 = true
      this.pagination2.currentPage = 1
      this.pagination2.total = 0
      this.handleCurrentChange2()
    },
    // 翻页
    handleCurrentChange2 (val) {
      if (val && val !== null) {
        this.pagination2.currentPage = val
      }
      this.$http.post(`/home/chemical/parkInfo/selectDangerDetailByPark`,{
        months: this.selecedMonth3,
        parkCode:this.parkInfoDetail.parkCode,
        limit:10,
        page:this.pagination2.currentPage
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.pagination2.total = Number(res.data.count)
          let arr = []
          res.data.data.forEach(item => {
            arr.push({
              dangerName:item.dangerName,
              dangerBatch:item.dangerBatch,
              maxStock:item.maxStock,
              createTime:item.createTime
            })
          })
          this.parkDangerDetail = arr
        }
      })
    },
    showDetail3 (name) { // 企业数量
      this.parkInfoDetail = { ...name }
      this.tittleName3 = this.parkInfoDetail.parkName + '企业数量详情'
      this.enterpriseCountDetail = []
      this.dialogVisible3 = true
      this.pagination3.currentPage = 1
      this.pagination3.total = 0
      this.handleCurrentChange3()
    },
    // 翻页
    handleCurrentChange3 (val) {
      if (val && val !== null) {
        this.pagination3.currentPage = val
      }
      this.$http.post(`/home/chemical/parkEnterprise/getParkEnterpriseByParkCodeAndYear`,{
        years: this.selecedYear2,
        parkCode:this.parkInfoDetail.parkCode,
        limit:10,
        page:this.pagination3.currentPage
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.pagination3.total = Number(res.data.count)
          let arr = []
          res.data.data.forEach(item => {
            if (item.entName !== null || item.timeLimit !== null) {
              arr.push({
                entName:item.entName,
                timeLimit:item.timeLimit
              })
            }
          })
          this.enterpriseCountDetail = arr
        }
      })
    },
    showDetail4 (name) { // 车辆排名
      // this.parkInfoDetail = { ...name }
      // this.tittleName5 = '车辆排名详情'
      this.parkGroupCarCountDetail = []
      this.dialogVisible4 = true
      this.pagination4.currentPage = 1
      this.pagination4.total = 0
      this.handleCurrentChange4()
    },
    // 翻页
    handleCurrentChange4 (val) {
      if (val && val !== null) {
        this.pagination4.currentPage = val
      }
      this.$http.post(`/home/chemical/parkInfo/getCarCountDetailByDate`,{
          yearMonth: this.selecedMonth4,
          // parkCode:this.parkInfoDetail.parkCode,
          parkCode: '',
          limit:10,
          page:this.pagination4.currentPage
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.pagination4.total = Number(res.data.data.count)
            let arr = []
            res.data.data.data.forEach(item => {
              if (item.subjectCategory === 0) {
                item.subjectCategory = '普通⻋辆'
              } else if (item.subjectCategory === 1) {
                item.subjectCategory = '危化品运⾏⻋辆'
              } else if (item.subjectCategory === 2) {
                item.subjectCategory = '货运⻋辆'
              }
              if (item.eventType === 0) {
                item.eventType = '进入'
              } else if (item.eventType === 1) {
                item.eventType = '离开'
              }
              if (item.gateName !== null || 
                  item.gateKeeper !== null || 
                  item.subjectCategory !== null || 
                  item.eventType !== null || 
                  item.eventTime !== null ) {
                arr.push({
                  nameAbbreviation:item.nameAbbreviation,
                  gateName:item.gateName,
                  gateKeeper:item.gateKeeper,
                  subjectCategory:item.subjectCategory,
                  eventType:item.eventType,
                  eventTime:item.eventTime
                })
              }
            })
            this.parkGroupCarCountDetail = arr
          }
        })
    },
    showDetail5 (name) { // 人员排名
      // this.parkInfoDetail = { ...name }
      // this.tittleName5 = '人员排名详情'
      this.parkGroupPersonCountDetail = []
      this.dialogVisible5 = true
      this.pagination5.currentPage = 1
      this.pagination5.total = 0
      this.handleCurrentChange5()
    },
    // 翻页
    handleCurrentChange5 (val) {
      if (val && val !== null) {
        this.pagination5.currentPage = val
      }
      this.$http.post(`/home/chemical/parkInfo/getPersonCountDetailByDate`,{
        yearMonth: this.selecedMonth5,
        // parkCode:this.parkInfoDetail.parkCode,
        parkCode:'',
        limit:10,
        page:this.pagination5.currentPage
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.pagination5.total = Number(res.data.data.count)
          let arr = []
          res.data.data.data.forEach(item => {
            if (item.subjectCategory === 0) {
              item.subjectCategory = '园区员工'
            } else if (item.subjectCategory === 1) {
              item.subjectCategory = '项目人员'
            } else if (item.subjectCategory === 2) {
              item.subjectCategory = '访客'
            }
            if (item.eventType === 0) {
              item.eventType = '进入'
            } else if (item.eventType === 1) {
              item.eventType = '离开'
            }
            if (item.gateName !== null || 
                item.gateKeeper !== null || 
                item.subjectCategory !== null || 
                item.eventType !== null || 
                item.eventTime !== null ) {
              arr.push({
                nameAbbreviation:item.nameAbbreviation,
                gateName:item.gateName,
                gateKeeper:item.gateKeeper,
                subjectCategory:item.subjectCategory,
                eventType:item.eventType,
                eventTime:item.eventTime
              })
            }
          })
          this.parkGroupPersonCountDetail = arr
        }
      })
    },
    formatDate (date, fmt) {
      if (!date) return
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      let o = {
        'M+': addZero(date.getMonth() + 1),
        'd+': addZero(date.getDate()),
        'h+': addZero(date.getHours()),
        'm+': addZero(date.getMinutes()),
        's+': addZero(date.getSeconds())
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, str)
        }
      }
      function addZero (num) {
        return num >= 10 ? num : '0' + num
      }
      return fmt
    },
  }
}
</script>
<style lang="scss" scoped>
.securitybottom {
  .safePersonCount {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .safePersonCount_title {
    padding: 20px;
    text-align: center;
  }
  .title_sty{
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }
  .warnControll {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .warnControll_charts {
    width: 100%;
    padding: 0px 40px 10px 40px;
  }
}
.majorHazardAnalysis_charts{
  width: 100%;
  padding: 20px 0px 20px 0px;
}
.subject{
  width: 100%;
  .tab{
    display: flex;
    justify-content:flex-start;
    margin-top: 20px;
    .Unit{
      padding: 0 40px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
      margin-left: 1.4%;
      padding-bottom: 20px;
    }
    .matchingCompany{
      padding: 0 12px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
    }
  }
}
.Unit-title{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    color: #333333;
}
.select{
    width: 110px;
    margin-top: 15px;
    margin-left: 40px;
}
.pagination{
    margin-top:20px;
    margin-left:40%;
}
.primaryButton {
  color: #FFFFFF;
  background-color: #1492ff;
  border-color: #1492ff;
}
/deep/ .el-dialog__title {
  font-weight: 700;
  font-size: 16px;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
.el-col-19 {
  margin-top: 4px;
}
</style>
